<template>
  <div id="goods-nav">
    <div class="nav-container1">
      <div class="editBtn">
        <w-button type="main" @on-click="showPopUp(0)">编辑</w-button>
      </div>
      <w-button-group>
        <w-button v-for="(nav, index) in goodsNav.childFloor" :key="index">{{nav.floorName}}</w-button>
        <w-button v-if="!goodsNav.childFloor || goodsNav.childFloor.length == 0">请添加分类</w-button>
      </w-button-group>
      <div class="shadow"></div>
    </div>
    <!--分类装修列表  -->
    <div id="popWindow">
      <!-- 弹框 -->
      <w-panel-fixed-wrap v-model="listShow" class="cb" title="添加分类" width="900px" height="500px" @on-confirm="closeWin(0)" @on-cancel="hidePopup(0)">
        <div class="sort">
          <w-label :must="false">排序</w-label>
          <div class="middle">
            <w-input rule="isEmpty|onlyInt" error="必填|只能为数字" name="sequence" v-model="params.sequence"></w-input>
          </div>
          <span>根据设置的数字进行位置排序，数字越小，位置越靠上</span>
        </div>
        <div class="sort">
          <w-label :must="false">是否展示</w-label>
          <div class="middle">
            <w-radio :label="0" name="show" v-model="params.isOpen">是</w-radio>
            <w-radio :label="1" name="show" v-model="params.isOpen">否</w-radio>
          </div>
          <span>设置否，则此楼层不在个人店铺首页展示</span>
        </div>
        <div class="addList">
          <div class="header">
            <w-button type="main" slot="title" @on-click="showPopUp(1)">添加</w-button>
          </div>
          <div class="">
            <div class="nav-list animated" :class="{slideOutLeft: (itemIndex == index)}" v-for="(nav, index) in goodsNav.childFloor" :key="index">
              <!-- 导航列名称（不可编辑） -->
              <span v-text="nav.floorName"></span>
              <!-- 操作按钮 -->
              <span class="operation">
                <span class="edit" @click="editNav(nav)">修改</span>
                <span class="delete" @click="deleteNav(index, nav.id)">删除</span>
              </span>
            </div>
          </div>
          <div class="tip">
            最多可以设置10个关键词
          </div>
        </div>
      </w-panel-fixed-wrap>
    </div>
    <!--新增分类装修  -->
    <div id="popAddClassify" >
      <!-- 弹框 -->
      <w-panel-fixed-wrap class="cb" v-model="addShow" title="设置分类名称" width="1300px" height="500px" @on-confirm="addNewGoodsNav" @on-cancel="hidePopup(1)">
        <form id="addNewBanner" :action="url" method="POST" enctype="multipart/form-data">
          <div class="input-name">
            <w-label :must="false">分类名称</w-label>
            <w-input :validate="false" name="floorName" v-model="params.floorName"></w-input>
          </div>
          <!-- 关联搜索组件 -->
          <associated-search :show-link="true" :tab-type="params.linkedProductType" :link="params.linkedProductUrl" @on-input="getInputValue" @header="setNavigationType"></associated-search>
          <!-- 添加商品和已选商品选项框 -->
          <div class="" v-if="!params.linkedProductType">
            <product-group :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
          </div>
          <!-- 隐藏字段 -->
          <div class="hidden">
            <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
            <input type="hidden" name="accessToken" :value="params.accessToken">
            <input type="hidden" name="sequence" :value="params.sequence">
            <input type="hidden" name="isOpen" :value="params.isOpen">
            <input type="hidden" name="floorType" value="Classify">
            <input type="hidden" name="displayMode" value="0">
            <input type="hidden" name="id" :value="params.id">
            <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
            <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
            <input type="hidden" name="decorationType" value="PC">
          </div>
        </form>
      </w-panel-fixed-wrap>
    </div>
  </div>
</template>

<script>
// 商品组件
import productGroup from './productGroup'

// 关联搜索组件
import associatedSearch from './associatedSearch'

// 店铺PC装修的链接
import { apiAdornPC } from '../../../common/api'
import { API } from '../../../common/config'

// 导入检验的js
import { validateFloorParam, inSelectedGoodsList } from '../validate'

export default {
  props: {
    goodsNav: {
      type: Object,
      default: () => { return {} }
    }
  },
  computed: {
    url() {
      // 如果当前是修改状态
      if (this.params.isEdit) {
        return `${API}decoration/updateFloor`
      }
      // 当前是新增状态
      return `${API}decoration/addFloor`
    }
  },
  data() {
    return {
      listShow: false,
      addShow: false,
      wordType: 'goods',
      itemIndex: -1,
      goodsList: [],
      params: {
        accessToken: this.$store.getters.token,
        decorationType: 'PC',
        navigationId: '12',
        navigationType: 0,
        sequence: 0,
        isOpen: 0,
        floorType: 'Classify',
        displayMode: 0,
        goodsIdList: '',
        floorName: '',
        linkedProductType: 0,
        linkedProductUrl: '',
        isEdit: false
      }
    }
  },
  watch: {
    goodsNav() {
      // 如果有关闭按钮
      if (this.goodsNav.isOpen) {
        this.params.isOpen = this.goodsNav.isOpen
      }
      // 如果有关闭按钮
      if (this.goodsNav.sequence) {
        this.params.sequence = this.goodsNav.sequence
      }
    }
  },
  components: {
    productGroup,
    associatedSearch
  },
  methods: {
    /**
     * 设置类型
     */
    setNavigationType(value) {
      this.params.linkedProductType = 1

      // 如果当前是商品
      if (value == 'goods') {
        this.params.linkedProductType = 0
      }
    },

    /**
     * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
     *
     * @param { String } value 搜索的参数
     */
    getInputValue(value) {
      // 如果当前是商品
      if (value.type == 'link') {
        this.params.linkedProductType = 1
        this.params.linkedProductUrl = value.goodsLink
      }

      // 如果当前是按商品查询
      if (value.type == 'goods') {
        // 设置类型是链接
        this.params.linkedProductType = 0

        // 设置token
        value.accessToken = this.$store.getters.token

        // 先清空商品列表
        this.goodsList = []

        // 获取参数
        apiAdornPC.searchGoodsByParams(value).then((data) => {
          // 如果没有获取到商品列表
          if (!data.list || data.list.length == 0) {
            return
          }

          // 遍历数据
          data.list.forEach((v) => {
            // 如果当前商品不在已选列表中
            if (!inSelectedGoodsList(v, this.params.goodsList)) {
              this.goodsList.push(v)
            }
          })
        })
      }
    },

    /**
     * 新增新的Banner
     */
    addNewGoodsNav() {
      // 如果排序字段没有填写
      if (!this.params.sequence) {
        this.$toast('请在上个页面填写排序字段')
        return
      }

      // 校验楼层参数
      if (!validateFloorParam(this.params)) {
        return
      }

      // 关键词是否存在
      let isExists = false

      // 校验关键词是否存在
      if (this.goodsNav && this.goodsNav.childFloor && this.goodsNav.childFloor.length > 0) {
        this.goodsNav.childFloor.forEach((v) => {
          if (v.floorName == this.params.floorName && v.id != this.params.id) {
            this.$toast('该关键字已存在')
            isExists = true
            return
          }
        })
      }

      // 如果关键词存在，则抛出
      if (isExists) return

      // 添加banner
      this.$emit('add', this.closeNavSet)
    },

    /**
     * 删除导航列项（删除女装等）
     *
     * @param { Integer } index 当前操作的列项索引
     */
    deleteNav(index, id) {
      this.$modal({
        title: '删除',
        content: '是否删除此条分类',
        onConfirm: () => {
          // 删除动画效果
          this.itemIndex = index

          // 等动画执行完成，从数组中删除
          setTimeout(() => {
            // 让父级删除
            this.$emit('delete', {id: id})

            // 初始化删除的索引
            this.itemIndex = -1
          }, 400)
        }
      })
    },

    /**
     * 编辑导航
     * @param  {[type]} nav [description]
     */
    editNav(nav) {
      // 取出商品列表的id
      let goodsIds = []

      // 如果有商品列表
      if (nav.goodsList && nav.goodsList.length > 0) {
        nav.goodsList.forEach((v) => {
          goodsIds.push(v.goodsId)
        })
      }

      this.params = {
        id: nav.id,
        accessToken: this.$store.getters.token,
        decorationType: 'PC',
        sequence: this.params.sequence,
        isOpen: this.params.isOpen,
        floorType: 'Classify',
        displayMode: nav.displayMode,
        goodsIdList: goodsIds.join(','),
        goodsList: nav.goodsList,
        floorName: nav.floorName,
        linkedProductType: nav.linkedProductType,
        linkedProductUrl: nav.linkedProductUrl,
        navigationType: 0,
        isEdit: true
      }

      // 展示编辑的内容
      this.addShow = true
      this.listShow = false
    },

    overEditNav(nav) {
      nav.isEdit = false
    },
    selectGoodsOrLink(type) {
      this.wordType = type
    },
    hidePopup(index) {
      if (index == 0) {
        this.listShow = false
      } else {
        this.addShow = false
        this.listShow = true
      }
    },

    /**
     * 关闭新增导航，编辑导航页面
     */
    closeNavSet() {
      this.goodsList = []
      this.addShow = false
      this.listShow = true
    },

    /**
     * 点击新增
     * @param  { Number } index 当前索引
     */
    showPopUp(index) {
      if (index == 0) {
        this.params.sequence = (this.goodsNav.sequence || 2)
        this.listShow = true
        this.addShow = false
        this.goodsList = []
      } else {
        // 如果已经设置超过10个分类了
        if (this.goodsNav.childFloor && this.goodsNav.childFloor.length == 10) {
          this.$toast('最多只可以设置10个关键词')
          return
        }

        // 如果排序字段没有填写
        if (!this.params.sequence) {
          this.$toast('请输入排序')
          return
        }

        this.addShow = true
        this.listShow = false
        this.goodsList = []

        // 初始化新增的属性
        this.params = {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: this.params.sequence,
          isOpen: this.params.isOpen,
          floorType: 'Classify',
          displayMode: 0,
          goodsIdList: '',
          floorName: '',
          navigationType: 0,
          linkedProductType: 0,
          linkedProductUrl: '',
          isEdit: false
        }
      }
    },

    /**
     * 关闭弹框
     * @param  { Number } index 关闭第几个窗体
     */
    closeWin(index) {
      if (index == 0) {
        // 如果序号没有填写，或者是否展示没有填写
        if (!this.params.sequence || !this.goodsNav.childFloor || this.goodsNav.childFloor.length == 0) {
          this.listShow = false
          return
        }

        apiAdornPC.saveFloor({
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: Number(this.params.sequence),
          isOpen: Number(this.params.isOpen),
          floorType: 'Classify'
        }).then((v) => {
          this.listShow = false
          this.$emit('refress')
        })
      } else {
        this.addShow = false
        this.listShow = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';

// 导航栏样式
#goods-nav {
  .nav-container1 {
    width: 1000px;
    margin: 0 auto;
    position: relative;

    &:hover {
      .editBtn {
        display: inline-block;
      }
      .shadow{
        display: inline-block;
      }
    }
    .shadow{
      background-color: rgba(0, 0, 0, 0.6);
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      z-index: 10;
    }
    .editBtn {
      display:none;
      position: absolute;
      right: 20px;
      top: 15px;
      z-index: 15;
    }
  }
}

// 分类装修列表
#popWindow {
  .sort {
    margin-bottom: 20px;
    .control-label {
      width: 60px;
      text-align: left;
      display: inline-block;
    }
    .w-input {
      display: inline-block;
    }
    span {
      margin-left: 15px;
    }
    .middle {
      width: 200px;
      display: inline-block;
    }
  }
  .addList {
    width: 678px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    .header {
      height: 52px;
      line-height: 52px;
      padding: 0 20px;
      background: #f7f7f7;
    }
    .w-input {
      // width: 200px;
      display: inline-block;
    }
    .panel-scroll {
      overflow-x: hidden;
      overflow-y: auto;
    }

    .nav-list {
      border: 1px solid rgb(237, 237, 237);
      line-height: 30px;
      padding: 6px 30px;
      margin-top: -1px;
      span {
        margin-right: 4px;
      }

      .operation {
        color: #f20685;
        float: right;
        margin-right: 0px;

        .edit {
          cursor: pointer;
          margin-right: 14px;
        }

        .delete {
          cursor: pointer;
          margin-right: 0px;
        }
      }
    }

    .tip {
      color: #fe7e03;
      padding: 6px 30px;
    }
  }
}

// 新增分类
#popAddClassify {
  .input-name{
    margin-bottom: 30px;
    .control-label{
      width:100px;
      text-align: left;
      display: inline-block;
    }
    .w-input{
      display: inline-block;
    }
  }
  .title {
      background-color: #f2f2f2;
      font-size: 14px;
      height: 52px;
      line-height: 52px;
      margin-left: -30px;
      margin-right: -30px;
      padding-left: 30px;
    }
  .goods-link {
    border-bottom: 1px solid #e0e0e0;
    margin: 0px -10px;
    padding: 26px 100px;

    .btns {
      background-color: #FFFFFF;
      border-radius: 4px;
      border: 1px solid rgb(204, 204, 204);
      width: 90px;
      height: 30px;
      margin-right: 36px;

      &.active {
        background-color: rgb(71, 189, 244);
        border: 1px solid rgb(71, 189, 244);
        color: #FFFFFF;
      }
    }
  }

  .class-select {
    border-bottom: 1px solid #e0e0e0;
    padding: 56px 100px;
    margin: 0px -10px;

    .select {
      display: inline-block;
      width: 132px;
      margin-right: 26px;
    }

    .input {
      display: inline-block;
      width: 160px;
    }

    .input-long {
      width: 300px;
    }
  }

  .search-btn {
    margin: 30px 0px 46px 90px;
  }

  .add-exists-goods {
    margin: 0px -10px;
    display: inline-block;
    .product-container {
      display: inline-block;
      width: 602px;

      &.mr26 {
        margin-right: 26px;
      }
    }
  }
}
</style>